<div layout="column" flex="100" class="stack-library-filter">
    <div layout="row" flex="100" layout-align="start center">
      <div flex="25" layout="column">
        <div class="stack-library-filter-label">Input tags:</div>
        <div class="stack-library-filter-description">
          Type a technology to narrow your selection.
        </div>
      </div>
      <div layout="column" flex="85">
        <md-chips class="stack-library-filter-tags"
                  ng-model="cheStackLibraryFilterCtrl.selectedTags"
                  md-transform-chip="cheStackLibraryFilterCtrl.transformChip($chip)"
                  md-on-add="cheStackLibraryFilterCtrl.onAdd()"
                  md-on-remove="cheStackLibraryFilterCtrl.onRemove()"
                  md-separator-keys="cheStackLibraryFilterCtrl.keys">
            <input type="text"
                   id="filter-stack-input"
                   ng-model="cheStackLibraryFilterCtrl.chip"
                   ng-change="cheStackLibraryFilterCtrl.querySearch(cheStackLibraryFilterCtrl.chip)"/>
          <md-chip-template>
            <div class="stack-library-filter-tag-text">{{$chip | uppercase}}</div>
            <div class="stack-library-filter-tag-btn">
              <i class="fa fa-close"></i>
            </div>
          </md-chip-template>
        </md-chips>
        <div class="stack-library-filter-description" ng-class="{'stack-library-filter-hidden': !cheStackLibraryFilterCtrl.suggestions.length}">
          Use <span class="stack-library-filter-description-bold">tab</span> or <i class="fa fa-arrow-up"></i> <i class="fa fa-arrow-down"></i> to navigate. <span class="stack-library-filter-description-bold">Return</span> to add.
        </div>
      </div>
    </div>
    <div layout="row" flex="100" layout-align="start center" class="stack-library-filter-suggestions-row" ng-class="{'stack-library-filter-hidden': !cheStackLibraryFilterCtrl.suggestions.length}">
      <label flex="25">Suggestions: </label>
      <div layout="column" flex="85" name="filterSuggestion">
        <md-chips ng-model="cheStackLibraryFilterCtrl.suggestions"
                  class="stack-library-filter-suggestions"
                  readonly="true">
          <md-chip-template>
            <div class="stack-library-filter-suggestion-text"
                 name="suggestionText"
                 ng-dblclick="cheStackLibraryFilterCtrl.onSelectSuggestion($chip)">{{$chip | uppercase}}</div>
            <div class="stack-library-filter-suggestion-btn"
                 name="suggestionButton"
                 ng-click="cheStackLibraryFilterCtrl.onSelectSuggestion($chip)">
              <i class="fa fa-plus"></i>
            </div>
          </md-chip-template>
        </md-chips>
      </div>
    </div>

</div>
